<div class="person">
  <dl class="row">
    <dt class="col-sm-1 username">用户名</dt>
    <!-- <dd class="col-sm-3">花花</dd> -->
  </dl>
  <dl class="row">
    <dt class="col-sm-1 realname">姓名</dt>
    <!-- <dd class="col-sm-3">花花</dd> -->
  </dl>
  <dl class="row">
    <dt class="col-sm-1 telephone">手机号</dt>
    <!-- <dd class="col-sm-3">花花</dd> -->
  </dl>
  <dl class="row">
    <dt class="col-sm-1 gender">性别</dt>
    <!-- <dd class="col-sm-3">花花</dd> -->
  </dl>
  <dl class="row">
    <dt class="col-sm-1 registerTime">注册时间</dt>
    <!-- <dd class="col-sm-3">花花</dd> -->
  </dl>
  <dl class="row">
    <dt class="col-sm-1 status">状态</dt>
    <!-- <dd class="col-sm-3">花花</dd> -->
  </dl>
  <!-- 修改 -->
  <dl class="row">
    <dt class="col-sm">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="change">
        修改
    </button>
    </dt>
  </dl>
  <!-- 修改模态框 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">修改个人信息</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" class="form-control" id="username" aria-describedby="emailHelp" name="username">
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" class="form-control" id="password" name="password">
        </div>
        <div class="form-group">
          <label for="realname">姓名</label>
          <input type="text" class="form-control" id="realname" aria-describedby="emailHelp" name="realname">
        </div>
        <div class="form-group">
          <label for="telephone">手机号</label>
          <input type="text" class="form-control" id="telephone" aria-describedby="emailHelp" name="telephone">
        </div>
        <div class="form-group">
          <label for="gender">性别</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="gender" id="man" value="男" checked>
          <label class="form-check-label" for="inlineRadio1">男</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="gender" id="female" value="女">
          <label class="form-check-label" for="inlineRadio2">女</label>
        </div>
      </form>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
    <button type="button" class="btn btn-primary" id="save">确认</button>
    </div>
  </div>
  </div>
  </div>

</div>
<script>
  var token=sessionStorage.getItem('token')
  var person;
  console.log(token);
  var user;
  //获取用户的登录信息
  function getUsers(){
      $.ajax({
      url:'http://182.92.83.218:7788/user/info?token='+token,
      type:'GET',
      headers:{
        'Authorization':token,
      },
      success:function(data){
        // console.log(data)
        person=data.data;
        
          $('.person .row .username').after(`
            <dd class="col-sm-3 clear1">`+person.username+`</dd>
          `)
          $('.person .row .realname').after(`
            <dd class="col-sm-3 clear1">`+person.realname+`</dd>
          `)
          $('.person .row .telephone').after(`
            <dd class="col-sm-3 clear1">`+person.telephone+`</dd>
          `)
          $('.person .row .gender').after(`
            <dd class="col-sm-3 clear1">`+person.gender+`</dd>
          `)
          $('.person .row .registerTime').after(`
            <dd class="col-sm-3 clear1">`+new Date(person.registerTime).toLocaleDateString()+`</dd>
          `)
          $('.person .row .status').after(`
            <dd class="col-sm-3 clear1">`+person.status+`</dd>
          `)
          $('.person').append(`
            <img src="`+person.userFace+`" alt="" class='img' >
          `)
          console.log(person.userFace)

        }
    })
  }
  getUsers()
  //修改个人信息
  $('#change').click(function(){
    // console.log(person);
      $('#username').val(person.username);
      $('#password').val(person.password);
      $('#realname').val(person.realname);
      $('#telephone').val(person.telephone);
    
    
  })
  $('#save').click(function(){
    var id=person.id;
    // console.log(id);
    var username=$('#username').val();
    var password=$('#password').val();
    var realname=$('#realname').val();
    var telephone=$('#telephone').val();
    var gender;
    var radios=$('.form-check-input')
        for(var i=0;i<radios.length;i++){
          if(radios[i].checked){
            gender=radios[i].value;
          }
        }
    // console.log(gender)
    var userFace=''
    user={
      id:id,
      username:username,
      password:password,
      realname:realname,
      telephone:telephone,
      gender:gender,
      address:person.address,
      birth:person.birth,
      nation:person.nation,
      userFace:person.userFace,
      politicsStatus:person.politicsStatus
    }
    $.ajax({
      url:'http://182.92.83.218:7788/baseUser/saveOrUpdate',
      type:'POST',
      headers:{
        'Authorization':sessionStorage.getItem('token'),
      },
      data:user,
      success:function(){
        //关闭模态框
        $("#exampleModal").modal("hide")
        //获取用户的登录信息
        // console.log(user);
        $('.clear1').empty();
        $('.img').remove()
        getUsers();
      }

    })

  })

  
</script>
<style>
  .person .img{
    position: relative;
    bottom: 250px;
    left: 300px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .person dt{
    color: #666;
  }
  .person dd{
    color: #999;
  }
</style>
